<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>审核工作管理<small>部门审核</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>部门审核</el-breadcrumb-item>
                <el-breadcrumb-item>个人待审</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">审核详情</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div  style="font-family: 华文楷体">
                    <span>报表编号：</span>
                    <span v-model="formNumber" style="color: blue;margin-right: 130px">{{formNumber}}</span>
                    <span>完成日期：</span>
                    <span v-model="workDate"  style="color: blue;margin-right: 130px">{{workDate}}</span>
                    <span>提交时间：</span>
                    <span v-model="submitDate" style="color: blue;">{{submitDate}}</span>
                </div>

                <!--表格-->
                <el-row>
                    <el-button type="danger" @click="deleteMany()" plain>删除选中</el-button>
                    <el-button type="info" @click="clearSelected()" plain>清空选中</el-button>
                    <el-button type="primary" plain>添加新项</el-button>
                </el-row>
                <template>
                    <el-table
                            :data="tableData"
                            ref="multipleTable"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                label="全选"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="item"
                                label="工作项"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="grade"
                                label="单项分值"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="数量"
                                align="center">
                            <template slot-scope="scope">
                                <el-input
                                        placeholder="请输入本工作项数量"
                                        v-model="input[scope.$index]"
                                        clearable v-on:blur="calCount(scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="count"
                                label="小计"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                align="center">
                            <template slot-scope="scope">
                                <el-input
                                        placeholder="请输入备注"
                                        v-model="remarks[scope.$index]"
                                        clearable v-on:blur="onBlurRemark(scope.$index)">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template  slot-scope="scope">
                                <el-row>
                                    <el-button type="danger" size="small" @click="deleteItem(scope.$index)">删除</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!--按钮-->
                <div style="margin-top: 10px" align="center">
                    <el-row>
                        <el-button style="margin-right: 30px" type="primary" @click="saveItems()" plain>保存</el-button>
                        <el-button style="margin-right: 30px" type="success" @click="submitItems()"plain>提交</el-button>
                        <el-button style="margin-right: 30px" type="warning" @click="giveUp()" plain>放弃填报</el-button>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--勾选多选框-->
                multipleSelection:[],
                <!--表格相关数据-->
                tableData: [{
                    id:'',
                    item:'',
                    grade:'',
                    count:'',
                    // input: '',
                    index:'',
                    remark:'',
                }],
                input:[],
                remarks:[],
                <!--日期相关数据-->
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }]
                },
                workDate: '',
            };
        },
        created() {
            let treeDataString = sessionStorage.getItem("treeData");
            let treeData = JSON.parse(treeDataString);
            this.tableData = this.recursiveAssignment(treeData);
            let j = 0;
            for (let i=0;i<treeData.length;i++){
                if (!treeData[i].children){
                    this.tableData[j].id = treeData[i].id;
                    this.tableData[j].item = treeData[i].label;
                    this.tableData[j].grade = treeData[i].grade;
                    // this.tableData[j].remark = treeData[i].remark;
                    this.tableData[j].count = 0;
                    this.tableData[j].index = j;
                    this.input[j] = '';
                    this.remarks[j] = '';
                    j++;
                }
            }
        },
        methods: {
            //创建表格数据空骨架
            recursiveAssignment(listData){
                let list = [];
                listData.forEach(item => {
                    let map = {
                        id:'',
                        item:'',
                        grade:'',
                        count:'',
                        index:'',
                        remark:'',
                        // input: '',
                    };
                    if (!item.children){
                        list.push(map);
                    };
                })
                return list;
            },
            //设置多选框为选中状态
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                 } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            //计算单项分值
            calCount(index){
                this.tableData[index].count = parseFloat((this.tableData[index].grade * this.input[index]).toFixed(4));
                if (this.remarks[index]===''){
                    //输入“工作项数量”后，失去焦点则当前工作项为选中状态
                    this.toggleSelection([this.tableData[index]]);
                }
            },
            //输入备注之后失去焦点
            onBlurRemark(index){
                if (this.input[index]===''){
                    //输入“工作项数量”后，失去焦点则当前工作项为选中状态
                    this.toggleSelection([this.tableData[index]]);
                }
            },

            //删除某一条工作项
            deleteItem(index){
                //使用确认删除弹框
                this.$confirm('此操作将删除本工作项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //点击确认删除则执行本代码逻辑
                    this.tableData.splice(index,1);
                    for (let i=0;i < this.tableData.length;i++){
                        this.tableData[i].index = i;
                    }
                    //删除工作项数据的同时也删除input输入框的内容
                    for (let i=index+1;i<this.input.length;i++){
                        this.input[i-1] =this.input[i];
                    }
                    this.input.splice(this.input.length-1,1);
                    for (let i=index+1;i<this.remarks.length;i++){
                        this.remarks[i-1] =this.remarks[i];
                    }
                    this.remarks.splice(this.remarks.length-1,1);
                    this.$message({
                        message:'删除工作项成功',
                        type:'success'
                    });
                }).catch(() => {
                    //点击取消删除执行本代码逻辑
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            <!--勾选多选框-->
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            <!--批量删除-->
            deleteMany(){
                //使用确认删除弹框
                this.$confirm('此操作将删除这些工作项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //点击确认删除则执行本代码逻辑
                    let indexes = [];
                    for (let i=0;i<this.multipleSelection.length;i++){
                        indexes[i] = this.multipleSelection[i].index;
                    }
                    //对索引进行排序，方便
                    for (let i = 0; i < indexes.length; i++) {
                        for (let j=i+1;j<indexes.length;j++){
                            if (indexes[i] > indexes[j]){
                                let t = indexes[i];
                                indexes[i] = indexes[j];
                                indexes[j] = t;
                            }
                        }
                    }
                    for (let i=indexes.length-1;i>=0;i--){
                        this.tableData.splice(indexes[i],1);
                        for (let j = indexes[i]+1; j < this.input.length; j++) {
                            this.input[j-1] = this.input[j];
                        }
                        this.input.splice(this.input.length-1,1);
                        for (let j = indexes[i]+1; j < this.remarks.length; j++) {
                            this.remarks[j-1] = this.remarks[j];
                        }
                        this.remarks.splice(this.remarks.length-1,1);
                    }
                    for (let i=0;i < this.tableData.length;i++){
                        this.tableData[i].index = i;
                    }
                    this.$message({
                        message:'删除工作项成功',
                        type:'success'
                    });
                }).catch(() => {
                    //点击取消删除执行本代码逻辑
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            <!--清空选中-->
            clearSelected(){
                for (let i=0;i<this.multipleSelection.length;i++){
                    for (let j=i;j<this.tableData.length;j++){
                        if (this.multipleSelection[i].item === this.tableData[j].item){
                            this.input[this.tableData[j].index]='';
                            this.calCount(this.tableData[j].index);
                            this.remarks[this.tableData[j].index]='';
                        }
                    }
                }
                this.$refs.multipleTable.clearSelection();
            },
            //创建请求参数空骨架，与后端的UserSaveItem实体类保持一致
            recursiveAssignmentUserSaveItem(listData){
                let list = [];
                listData.forEach(item => {
                    let map = {
                        item:'',
                        grade:'',
                        count:'',
                        number: '',
                        remark:'',
                    };
                    list.push(map);
                })
                return list;
            },
            //保存用户已经填报的表单
            saveItems(){
                let formItems = this.recursiveAssignmentUserSaveItem(this.tableData);
                for (let i = 0; i < formItems.length; i++) {
                    formItems[i].item = this.tableData[i].item;
                    formItems[i].grade = this.tableData[i].grade;
                    formItems[i].count = this.tableData[i].count;
                    if (this.input[this.tableData[i].index]===''){
                        formItems[i].number = 0;
                    }else{
                        formItems[i].number = this.input[this.tableData[i].index] - 0;
                    }
                    formItems[i].remark = this.remarks[i];
                }
                let id_card_number = "440882199412204773";
                let saveDate = new Date();
                let userForm = {
                    'idCardNumber': id_card_number,
                    'workDate':this.workDate,
                    'saveDate':saveDate,
                    'formItems':formItems
                };
                axios.post("/kpi_assess/userSaveItems",userForm).then((resp)=>{
                    if (resp.data.data){
                        this.$message({
                            type:'success',
                            message:'保存报表成功！'
                        });
                        //页面跳转
                        window.location.href="wait_submit.html";
                    }else{
                        this.$message.error("保存报表失败！");
                    }
                });
            },
            submitItems(){
                let submitItems = this.recursiveAssignmentUserSaveItem(this.tableData);
                for (let i = 0; i < submitItems.length; i++) {
                    submitItems[i].item = this.tableData[i].item;
                    submitItems[i].grade = this.tableData[i].grade;
                    submitItems[i].count = this.tableData[i].count;
                    if (this.input[this.tableData[i].index]===''){
                        submitItems[i].number = 0;
                    }else{
                        submitItems[i].number = this.input[this.tableData[i].index] - 0;
                    }
                    submitItems[i].remark = this.remarks[i];
                };
                console.log(submitItems);
                let id_card_number = "440882199412204773";
                let submitDate = new Date();
                let submitForm = {
                    'idCardNumber': id_card_number,
                    'workDate':this.workDate,
                    'submitDate':submitDate,
                    'submitItems':submitItems
                };
                console.log(submitForm);
                axios.post("/kpi_assess/submitForms",submitForm).then((resp)=>{
                    if (resp.data.data){
                        this.$message({
                            type:'success',
                            message:'保存报表成功！'
                        });
                        //页面跳转
                        window.location.href="wait_review.html";
                    }else{
                        this.$message.error("保存报表失败！");
                    }
                });
            },
            <!--放弃填报-->
            giveUp(){
                window.location.href="welcome.html";
            },
        }
    })
</script>
</html>